﻿<?php


?>

<!DOCTYPE html>
<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery UI Sortable - Portlets</title>
	
	
	<link rel="stylesheet" href="sunny/jquery.ui.all.css">
	<script src="jquery.js"></script>
	<script src="jquery.ui.core.js"></script>
	<script src="jquery.ui.widget.js"></script>
	<script src="jquery.ui.mouse.js"></script>
	<script src="jquery.ui.sortable.js"></script>
	
	
	
	
	
	<style>
#info {
	display: block;
	width: 400px;
	padding: 10px; margin-bottom: 20px;
	border: 1px solid #333;
	font-size: 12px;
	background-color: #efefef;
}

.colheader { margin 0px; padding: 5px; font-size: 14px; border-collapse: collapse; font-weight: bold; width: 190px; border: 1px dotted grey; vertical-align: top; text-align: center}
.column { width: 190px; border: 0px; margin: 0px; padding: 0px; border-collapse: collapse; height: 100%; padding-bottom: 100px; font-size: 10px; font-weight: normal; text-align: center;}
.column2 { width: 20px; padding-bottom: 100px;}
.portlet { margin: 0 0 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
</style>







	
<script type="text/javascript">

$(document).ready(function() {

	$(function() {
		
		$( ".column" ).sortable({
			connectWith: ".column"
		});		
		
		$(".column").sortable({
      update : function () {
	    
	    // columna izq
		  var datos1 = "";
		  var nrdivs1 = document.getElementById('coll').getElementsByTagName('div');
		  for (var no=0; no<nrdivs1.length; no++) {
			  datos1 = datos1 + nrdivs1[no].id+";";
			}
			
			// columna central
		  var datos2 = "";
		  var nrdivs2 = document.getElementById('colc').getElementsByTagName('div');
		  for (var no=0; no<nrdivs2.length; no++) {	
			  datos2 = datos2 + nrdivs2[no].id + ";";
			}
			
			// columna der
		  var datos3 = "";
		  var nrdivs3 = document.getElementById('colr').getElementsByTagName('div');
		  for (var no=0; no<nrdivs3.length; no++) {
			  datos3 = datos3 + nrdivs3[no].id + ";";
			}
		  
		  $("#info").load("escribe.php?col1="+datos1+"&col2="+datos2+"&col3="+datos3);
  		
      }
    });
    

		$(".portlet").addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
			.find( ".portlet-header" )
		  .addClass( "ui-widget-header ui-corner-all" )
		  .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
			.end()
			.find( ".portlet-content" );

		$( ".portlet-header .ui-icon" ).click(function() {
			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
		});

		$(".column").disableSelection();
	});
	
});	
	</script>
</head>




<body style="cursor: auto; font-family: Verdana, Arial, Helvetica, sans-serif">
	
<pre>
<div id="info">Waiting for update</div>
</pre>	
	
<div class="demo">
<table>
<tr>

<!-- INICIO COL IZQUIERDA -->
<td id="mcol_l" class="colheader">
<div style="font-size: 12px">Columna izquierda</div>

<div id="coll" name="coll" class="column ui-sortable">


	<div id="b1" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
		<div class="portlet-header ui-widget-header ui-corner-all">ID: 1 Nombre: Feeds</div>
		<div class="portlet-content">
			<b>Posición:</b> <div id="apos1"></div><br />
			<b>¿Activo?</b>
			<input type="radio" id="block_active_1" name="cperms[block_a1]" value="1" checked /> <label for="block_active_1">Si</label>
      <input type="radio" id="block_active_0" name="cperms[block_a1]" value="0" /> <label for="block_active_0">No</label>
		</div>
	</div>




	<div id="b2" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
		<div class="portlet-header ui-widget-header ui-corner-all">ID: 2 Nombre: News</div>
		<div class="portlet-content">
			<b>Posición:</b> <div id="apos2"></div><br />
			<b>¿Activo?</b>
			<input type="radio" id="block_active_2" name="cperms[block_a2]" value="1" checked /> <label for="block_active_2">Si</label>
      <input type="radio" id="block_active_3" name="cperms[block_a2]" value="0" /> <label for="block_active_3">No</label>
		</div>
	</div>


</div>
</td>
<!-- FIN COL IZQUIERDA -->

<!-- COL ESPACIO -->
<td style="width: 10px; border: 0px">

</td>

<!-- INICIO COL CENTRAL -->
<td id="mcol_l" class="colheader">
<div style="font-size: 12px">Columna central</div>


<div id="colc" name="colc" class="column ui-sortable" >
	

	<div id="b3" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="">
		<div class="portlet-header ui-widget-header ui-corner-all"><b>ID:</b> <b>Nombre:</b> Links</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>



	<div id="b4" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="">
		<div class="portlet-header ui-widget-header ui-corner-all"><b>ID:</b> <b>Nombre:</b> Main</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>


</div>
</td>
<!-- FIN COL CENTRAL -->

<!-- COL ESPACIO -->
<td id="mcol_e" style="width: 10px; border: 0px">

</td>

<!-- INICIO COL DERECHA -->
<td id="mcol_l" class="colheader">
<div style="font-size: 12px">Columna derecha</div>
	
<div id="colr" name="colr" class="column ui-sortable">

	
	<div id="b5" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
		<div class="portlet-header ui-widget-header ui-corner-all"><b>ID:</b> <b>Nombre:</b> Images</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>

	

	<div id="b6" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="">
		<div class="portlet-header ui-widget-header ui-corner-all"><b>ID:</b> <b>Nombre:</b> Shopping</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>


</div>
</td>
<!-- FIN COL DERECHA -->

</tr>
</table>
</div>







</body></html>